
import * as React from 'react'
import { NavBar, Icon, Item, Button, Input, FlatList } from 'components'
import DatePicker from 'react-mobile-datepicker'
import moment  from 'moment'
import './ExChangeList.less'
import { NotBean, post } from '../../../../utils'

export default class DebtExChangeList extends React.Component<any, any> {

    public state = {
        isShowSelectTimeBar: false,
        btnIndex: 1,
        showStime: false,
        showEtime: false,
        stimeMax: moment().toDate(),
        etimeMax: moment().toDate(),
        stimeMin: moment().toDate(),
        etimeMin: moment().toDate(),
        time: {
            stime: moment().subtract(1, 'months').toDate(),
            etime: moment().toDate(),
        },
        searchRange: 5 // 离现在时间 到 五年前
    }
    public node: any
    public index: number = 1
    public componentDidMount () {
        this.setState({
            etimeMax: moment().toDate(),
            etimeMin: moment().subtract(this.state.searchRange, 'y').toDate(),
            stimeMax: moment().toDate(),
            stimeMin: moment().subtract(this.state.searchRange, 'y').toDate(),
        })
    }
    public render(): JSX.Element {
        const { isShowSelectTimeBar, btnIndex, showStime, showEtime, time, etimeMax, etimeMin, stimeMax, stimeMin } = this.state
        const { userDebtExchangeList } = this.props
        return (
            <div className="exChangeList">
                <NavBar
                    title={<div style={{fontSize: '0.97rem', color: '#222'}}>债务兑换记录</div>}
                    fixed={true}
                    right={<div><Icon type="calendar" onClick={this.showSelectTimeBar} /></div>}
                />
                {/* <div className="exChangeList_searchBar">
                    <SearchBar className="exChangeList_searchBar_item" placeholder="债务人名称/身份证号码" right={<div><Icon type="calendar" onClick={this.showSelectTimeBar} /></div>} left=" " />
                </div> */}
                <div style={{marginBottom: '0.4rem'}}>
                    <FlatList 
                        ref={(ref) => {this.node = ref}}
                        data={userDebtExchangeList}
                        onRefresh={this.getData.bind(this, time)} 
                        ListEmptyComponent={NotBean}
                        renderItem={(item: any, index: number) => {
                            return (
                                <div className="exChangeList_list" key={index}>
                                    <Item 
                                        className="exChangeList_list_item" 
                                        title={<div className="exChangeList_list_item_title">
                                        <Icon type="user" />债权人：{item && item.shop_zw_users.real_name}</div>} 
                                        value={<div className="exChangeList_list_item_value">
                                        <Button className="exChangeList_list_item_value_btn"><a href="https://www.baidu.com" style={{color: '#222'}}>下载合同</a></Button>
                                        <Button className="exChangeList_list_item_value_btn"><a href="https://www.baidu.com" style={{color: '#222'}}>下载谅解书</a></Button>
                                        </div>} 
                                    />
                                    <div className="exChangeList_list_content">
                                        <p><img src={require('../../../../assets/beans.png')}/>兑换恒豆：{item && item.price}</p>
                                        <p><Icon type="IdCard" />身份证：{item && item.shop_zw_users.id_card}</p>
                                        <p><Icon type="time_circle" />兑换时间：{item && item.create_time}</p>
                                    </div>
                                </div>
                                
                            )
                        }}
                    />
                    <DatePicker theme="ios" value={time.stime} max={stimeMax} min={stimeMin} isOpen={showStime} onSelect={this.handleSelectTime.bind(this, 1)}  onCancel={() => {this.handleHideTime('showStime')}} />
                    <DatePicker theme="ios" value={time.etime} max={etimeMax} min={etimeMin} isOpen={showEtime} onSelect={this.handleSelectTime.bind(this, 2)} onCancel={() => {this.handleHideTime('showEtime')}} />
                </div>
                {
                    isShowSelectTimeBar && 
                    <div className="myHdBill_selectTimeBarModal">
                        <div className="myHdBill_selectTimeBarModal_btnWrap">
                            <Button 
                                onClick={() => {this.handleBtnIndex(1)}}
                                className={`myHdBill_selectTimeBarModal_btnWrap_btn ${(btnIndex === 1) ? 'myHdBill_selectTimeBarModal_btnWrap_active' : ''}`}
                            >近一周
                            </Button>
                            <Button 
                                onClick={() => {this.handleBtnIndex(2)}}                                
                                className={`myHdBill_selectTimeBarModal_btnWrap_btn ${(btnIndex === 2) ? 'myHdBill_selectTimeBarModal_btnWrap_active' : ''}`}
                            >近一月
                            </Button>
                            <Button 
                                onClick={() => {this.handleBtnIndex(3)}}                                
                                className={`myHdBill_selectTimeBarModal_btnWrap_btn ${(btnIndex === 3) ? 'myHdBill_selectTimeBarModal_btnWrap_active' : ''}`}
                            >近三月
                            </Button>
                        </div>
                        <div className="myHdBill_selectTimeBarModal_timeBar">
                            <div className="myHdBill_selectTimeBarModal_timeBar_title">自定义时间查询</div>
                            <div className="myHdBill_selectTimeBarModal_timeBar_content">
                                <div>
                                    <Icon type="calendar" />
                                    <Input readOnly={true} onClick={() => {this.handleShowTime('showStime')}} type="text" placeholder={moment(time.stime).format('YYYY-MM-DD')} />
                                </div>
                                <div>
                                    <Icon type="arrow_long_right" />
                                </div>
                                <div>
                                    <Icon type="calendar" />
                                    <Input type="text" readOnly={true} onClick={() => {this.handleShowTime('showEtime')}}  placeholder={moment(time.etime).format('YYYY-MM-DD')} />
                                </div>
                            </div>
                            <div className="myHdBill_selectTimeBarModal_timeBar_btn">
                                <Button  onClick={this.handleSearch}  className="myHdBill_selectTimeBarModal_timeBar_btn_item">查询</Button>
                            </div>
                            <p className="myHdBill_selectTimeBarModal_timeBar_text">
                                温馨提示：查询跨度不超过一年
                            </p>
                        </div>
                        <div className="myHdBill_selectTimeBarModal_timeBar_filter" onClick={this.hideSelectTimeBar}/>
                    </div>
                }
            </div>
        )
    }
    private getData = (time: any = {}) => {
        const { userInfo, SET_MYUTILS_DEBTEXCHANGELIST, userDebtExchangeList, userDebtManagerID } = this.props
        post('usersapi/userZqChangeList', {
            id: userDebtManagerID,
            page: this.index,
            userId: userInfo.id,
            stime: moment(time.stime).format('YYYY-MM-DD'),
            etime: moment(time.etime).format('YYYY-MM-DD'),
        }).then((data: any) => {
            if (this.index === 1) {
                SET_MYUTILS_DEBTEXCHANGELIST(data.data)
            }  else {
                if (data.data.length) {
                    SET_MYUTILS_DEBTEXCHANGELIST(userDebtExchangeList.concat(data.data))
                    this.node.finishLoad()
                }
            }
            this.index++
        })
    }
    private handleSearch = () => {
        this.index = 1
        const { time } = this.state
        this.node.finishLoad()
        this.getData(time)
    }
    private handleBtnIndex = (i: number) => {
        this.index = 1
        let time = {
            stime:  moment().toDate(),
            etime: moment().toDate()
        }
        switch (i) {
            case 1: 
            time.stime = moment().subtract(7, 'days').toDate(); break
            case 2: 
            time.stime = moment().subtract(1, 'months').toDate(); break
            case 3: 
            time.stime = moment().subtract(3, 'months').toDate(); break
            default: break
        }
        this.setState({btnIndex: i, time})
        this.node.finishLoad()
        this.getData(time)
    }
    private handleSelectTime = (type: any, val: any) => {
        const time = Object.assign({}, this.state.time)
        const { searchRange } = this.state
        let eMax: any
        let eMin: any
        let sMin: any
        let sMax: any
        const dataRangeMin = moment().subtract(searchRange, 'y').toDate()
        const dataRangeMax = moment().toDate()
        if (type === 1) {
            time.stime = val
            if (moment(dataRangeMin).year() === moment(val).year()) {
                eMin = dataRangeMin
                eMax = moment(val).add(1, 'y').toDate()
            } else if (moment(dataRangeMax).year() === moment(val).year()) {
                eMax = dataRangeMax
                eMin = moment(val).subtract(1, 'y').toDate()
            } else {
                eMax = moment(val).add(1, 'y').toDate()
                eMin = moment(val).subtract(1, 'y').toDate()
            }
            this.setState({
                time,
                showStime: false,
                etimeMax: eMax,
                etimeMin: eMin,
            })
            return
        }
        time.etime = val
        if (moment(dataRangeMin).year() === moment(val).year()) {
            sMin = dataRangeMin
            sMax = moment(val).add(1, 'y').toDate()
        } else if (moment(dataRangeMax).year() === moment(val).year()) {
            sMax = dataRangeMax
            sMin = moment(val).subtract(1, 'y').toDate()
        } else {
            sMax = moment(val).add(1, 'y').toDate()
            sMin = moment(val).subtract(1, 'y').toDate()
        }
        this.setState({
            time,
            showEtime: false,
            stimeMax: sMax,
            stimeMin: sMin,
        })
    }
    private handleShowTime = (key: string) => {
        this.setState({
            [key]: true
        })
    }
    private handleHideTime = (key: string) => {
        this.setState({
            [key]: false
        })
    }

    private hideSelectTimeBar = () => {
        this.setState({
            isShowSelectTimeBar: false
        })
    }
    private showSelectTimeBar = () => {
        this.setState({
            isShowSelectTimeBar: true
        })
    }
    // private goToUrl = (url: string = '/') => {
    //     this.props.history.push(url)
    // }
}